<template>
  <div>

    <Panel title="开票详情" useBack>
      <div  slot="body">
        <el-form class="from_box" ref="form"  label-width="200px">
        <p class="h1" style="margin-top:0">基本信息</p>
        <div class="from_box">
          <el-form-item label="开票员：">{{detail.clerk}}</el-form-item>
          <el-form-item label="发票代码  ：">{{detail.invoiceCode}}</el-form-item>
          <el-form-item label="发票种类：">{{detail.invoiceLine}}</el-form-item>
          <el-form-item label="发票号码：">{{detail.invoiceNo}}</el-form-item>
          <el-form-item label="开票类型：">{{detail.invoiceType==1? "蓝票": detail.invoiceType==2? "红票" : '未知'}}</el-form-item>
          <el-form-item label="来源：">{{detail.origin ===0 ? "app(微信)": detail.origin===1 ?"新电途": '未知'}}</el-form-item>
          <el-form-item label="发票地址：">{{detail.pdfUrl}}</el-form-item>
          <el-form-item label="用户手机号 ：">{{detail.phone }}</el-form-item>
          <el-form-item label="开票总金额  ：">{{detail.priceTotal}}</el-form-item>
           <el-form-item label="税率  ：">{{detail.taxRate}}</el-form-item>
            <el-form-item label="开票总金额  ：">{{detail.priceTotal}}</el-form-item>
          <el-form-item label="推送方式 ：">{{detail.pushMode===-1?"不推送": detail.pushMode===0?"邮箱": detail.pushMode===1? "手机(默认)":detail.pushMode===2? "手机、邮箱": "未知"  }}</el-form-item>
          <el-form-item label="抬头类型 ：">{{detail.receiveType}}</el-form-item>
          <el-form-item label="备注 ：">{{detail.remark}}</el-form-item>
          <el-form-item label="开票方税号 ：">{{detail.salerTaxNum}}</el-form-item>
          <el-form-item label="状态 ：">{{detail.detail.pushMode===-1?"客户申请中(未处理)": detail.pushMode===2?"开票中": detail.pushMode===3? "已开票":detail.pushMode===4? "用户取消": detail.pushMode===5? "拒绝开票": detail.pushMode===2? "开票失败": "未知"}}</el-form-item>
          <el-form-item label="发票结果是否待推送 ：">{{detail.invoiceType==1? "是": detail.invoiceType==0? "否" : '未知'}}</el-form-item>
        </div>
      </el-form>
       
    <TableEncapsulation
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
      </div>
    </Panel>
    
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
export default {
  name: "invoceInfo_",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      detail: {},
      tableData: [],
      query: {
        page: 1
      },
      id: '',
       pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      name: '',
      operation: true,
      appointmentTime: null,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  created() {
    if(this.$route.query.id)
    this.id = this.$route.query.id
    this.getQueryData();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "订单号",
            type: "text",
            prop: "oid",
            align: "center"
          },
          {
            label: "电费",
            type: "text",
            prop: "powerPrice",
            align: "center"
          },
          {
            label: "服务费",
            type: "text",
            prop: "serverPrice",
            align: "center"
          },
          {
            label: "附加费",
            type: "text",
            prop: "surcharge",
            align: "center"
          },
          {
            label: "总金额",
            type: "text",
            prop: "priceTotal",
            align: "center"
          },
          {
            label: "时间",
            type: "text",
            prop: "createTime",
            align: "center"
          },
          // this.operation && {
          //   type: "operation",
          //   align: "center",
          //   label: "操作",
          //   width:180
          // }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getQueryData() {
      let end_time = this.appointmentTime ? (dateFormat(this.appointmentTime[1], "yyyy-MM-dd HH:mm:ss")) : undefined
      let begin_time = this.appointmentTime ? (dateFormat(this.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let page = this.pager.current
      let search = {begin_time, end_time, page}
      const res = await request({
        url: `/invoicing/info`,
        method: "POST",
        data: {UUID: this.id, page}
      });
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQueryData();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    editStore(id){
      this.$router.push({ path: "/editStore",query:{id:id} })
    },
    commentDetail(id){
      this.$router.push({ path: "/storeDetail",query:{id:id,type: "toview"} })
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        await DELETE(`/store/${id}`,id)
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.queryData()
      })
    },
  }
}
</script>
<style lang='scss' >
.h1{
    line-height: 60px;
    margin-top: 60px;
    background: #eee;
    padding: 0 10px;
    color: #555;
}

.from_box{
  display: flex;
    flex-wrap: wrap;
}
.el-form-item{
  width: 48%;
}
.el-form-item__label{
  text-align: left;
}
</style>